<!-- quality质量管理 -->
<template>
  <div class="container-quality">
    <!-- 头部 -->
    <van-nav-bar title="质量管理" @click-left="goBack" @click-right="show=true" fixed :border="false" :z-index="100">
      <span class="el-icon-arrow-left fontsize" slot="left"></span>
      <img src="../../../assets/imgs/screen.png" class="screen fontsize" slot="right">
    </van-nav-bar>
    <div class="wrapper">
      <div class="quality-top">
        <p v-text="data.data.length > 0 ? data.data[active].name : ''"></p>
        <p>计划开始时间：{{data.data.length > 0 ? data.data[active].startTime : ''}}</p>
        <p>计划完工时间：{{data.data.length > 0 ? data.data[active].endTime : ''}}</p>
      </div>
      <div class="quality-box" v-for="(item, index) in data.list" :key="index">
        <div class="quality-box-title">
          <p v-text="item.name"></p>
          <p v-text="'共'+item.children.length+'项'"></p>
        </div>
        <div class="quality-box-item" v-for="(items, index) in item.children" :key="index">
          <div class="quality-box-item-left" v-text="index+1"></div>
          <div class="quality-box-item-right">
            <div class="quality-box-item-right-top" :style="{'background-color': items.fileUrl === '' ? '#C4C8D1' : '#4c80f7'}">
              <p v-text="items.name"></p>
              <van-icon name="eye-o" @click="toRead(items.fileUrl)" />
            </div>
            <div class="quality-box-item-right-bottom">
              <span v-text="'上传人：'+items.people"></span>
              <span v-text="'认证时间：'+items.time"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <popupScreeningDIY :showPopup="show" :data="popupData" @showPopup="(val)=>{show=val}" @sure="(val)=>{if (val[0] !== '') {active=val[0]}}" ref="popupScreeningDIY"></popupScreeningDIY>
  </div>
</template>

<script type='textecmascript-6'>
import { QueryQCMergeSchedulePlan, GetQCManage } from '@/api/api.js'
import popupScreeningDIY from '@/components/common/DropdownScreening/popupScreeningDIY'

export default {
  components: {
    popupScreeningDIY
  },
  data() {
    return {
      userId:'', //用户id
      data: {
        data: [],
        list: [
          {name: '施工方案', children: []},
          {name: '技术交底', children: []},
          {name: '工序验收', children: []}
        ]
      },
      popupData: [
        {label: '选择节点名称', children: [

        ]}
      ],
      active: 0,
      show: false
    }
  },
  mounted(){
    this.userId = localStorage.getItem("userId");
    this.QueryQCMergeSchedulePlan()
  },
  methods: {
    QueryQCMergeSchedulePlan () {
      let params = {
        ProjectID: localStorage.getItem("projectid"),
        Builing: "",
        Specialty: "",
        Floor: "",
        CategoryName: "",
        QueryInfo: ""
      };
      this.Request(QueryQCMergeSchedulePlan(params)).then(res=>{
        if (res.StatusCode === 200) {
          if (res.Detiel.length != 0) {
            let _data = []
            for (let i=0; i<res.Detiel.length; i++) {
              _data.push({
                id: res.Detiel[i].ID,
                name: res.Detiel[i].MergeName,
                taskId: res.Detiel[i].TaskIds,
                startTime: this.formatTime(res.Detiel[i].BaseStartTime, 'YYYY-MM-DD'),
                endTime: this.formatTime(res.Detiel[i].BaseFinishTime, 'YYYY-MM-DD')
              })
              this.popupData[0].children.push({
                label: res.Detiel[i].MergeName,
                value: i
              })
            }
            this.data.data = _data
            this.$nextTick(()=>{
              this.$refs.popupScreeningDIY.resetSelectName([this.active])
            })
            this.GetQCManage()
          } else {
            this.data.data = [];
          }
        } else {
          this.$message({
            type: "error",
            message: res.Message,
            center: "true"
          });
        }
      })
    },
    GetQCManage () {
      let params = {
        userid: localStorage.getItem("userId"),
        TaskID: this.data.data[this.active].taskId
      };
      this.Request(GetQCManage(params)).then(res=>{
        this.resetChildren()
        if (res.StatusCode === 200) {
          if (res.Detiel.length != 0) {
            for (let i=0; i<res.Detiel.length; i++) {
              this.data.list[res.Detiel[i].Mode].children.push({
                name: res.Detiel[i].SchemeName === '' ? '-' : res.Detiel[i].SchemeName,
                people: res.Detiel[i].Uploader,
                time: this.formatTime(res.Detiel[i].ConfirmDate, 'YYYY-MM-DD'),
                fileUrl: res.Detiel[i].FileUrl || ''
              })
            }
          }
        } else {
          this.$message({
            type: "error",
            message: res.Message,
            center: "true"
          });
        }
      })
    },
    resetChildren () {
      this.data.list[0].children = []
      this.data.list[1].children = []
      this.data.list[2].children = []
    },
    formatTime: (time, format) =>{
      var _time = new Date(time)
      if(!format || format == ''){
        format = 'YYYY-MM-DD hh:mm:ss';
      }
      var date = {
        "M+": _time.getMonth() + 1,
        "D+": _time.getDate(),
        "h+": _time.getHours(),
        "m+": _time.getMinutes(),
        "s+": _time.getSeconds(),
        "q+": Math.floor((_time.getMonth() + 3) / 3),
        "S+": _time.getMilliseconds()
      };
      if (/(y+)/i.test(format)) {
        format = format.replace(RegExp.$1, (_time.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      for (var k in date) {
        if (new RegExp("(" + k + ")").test(format)) {
          format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
        }
      }
      return format;
    },
    toRead (url) {
      if (url === '' || typeof(url) !== 'string') {
        this.$message({
          type: "error",
          message: '没有文件',
          center: "true"
        });
        return
      }
      this.$router.push({path: '/qualityRead', query: {url: 'http://sz.hn-ym.cn:8017'+url}})
    },
    //返回
    goBack() {
      this.$router.push({ path: "/nav/to/index" });
    }
  },
  watch: {
    active (val) {
      this.GetQCManage()
    }
  }
};
</script>
<style lang='stylus' scoped rel='stylesheet/stylus'>
.container-quality
  width 100%
  height 100%
  &::before
    content: ''
    display table
  .van-nav-bar
    height 88px
    line-height 88px
    border-bottom 1px solid #E5E5E5
    .fontsize
      font-size 42px
      color #333
      display inline-block
      vertical-align middle
    .screen
      width 41px
      height 35px
    .van-nav-bar__title
      font-size: 36px
  .wrapper
    margin-top 88px
    margin-bottom 20px
    .quality-top
      padding 20px 24px
      background-color #fff
      margin-bottom 20px
      p
        font-size 28px
        margin-bottom 0
        margin-top 18px
        &:first-child
          font-size 32px
          font-weight bold
          margin-bottom 20px
          margin-top 0
    .quality-box
      padding 30px 24px 20px
      margin-top 20px
      background-color #fff
      box-shadow 0 0 5px 5px #f0f0f0
      .quality-box-title
        display flex
        align-items center
        padding-bottom 28px
        border-bottom: 1px solid #e5e5e5
        p
          font-size 26px
          color #999
          &:first-child
            margin-right 5px
            font-size 30px
            color #333
      .quality-box-item
        padding 20px 30px
        margin-top 20px
        background-color #f4f5f8
        border-radius 8px
        display flex
        align-items: flex-start;
        justify-content: space-between;
        .quality-box-item-left
          width 40px
          height 40px
          line-height 40px
          border-radius 20px
          background-color #4C80F7
          text-align center
          font-size 30px
          color #fff
          margin-top 9px
        .quality-box-item-right
          width 582px
          .quality-box-item-right-top
            padding 14px 20px
            background-color #4C80F7
            color #fff
            border-radius 8px
            display flex
            align-items: center
            justify-content: space-between
            p
              width 480px
              padding-right 20px
              overflow hidden
              text-overflow ellipsis
              white-space: nowrap
              border-right 1px solid #fff
              font-size 30px
            i
              font-size 30px
          .quality-box-item-right-bottom
            margin-top 20px
            span
              font-size 28px
              color #666
              &:first-child
                margin-right 50px
</style>
